<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>


<body>
	<div id="map-wrap" style="height: 500px;">
		<!-- 这里以后是地图 -->
	</div>
</body>
<script src="/dep/echarts.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">


$(function() {
	$.get('map/json/couties/maoming.json', function (chinaJson) {
		echarts.registerMap('茂名', chinaJson); // 注册地图
		var mapChart = echarts.init(document.getElementById('map-wrap'));

		var ppdata = [{
		    name: '茂南区',
		    value: '84'
		}, {
		    name: '电白区',
		    value: '197'
		}, {
		    name: '高州市',
		    value: '173'
		}, {
		    name: '化州市',
		    value: '165'
		}, {
		    name: '信宜市',
		    value: '142'
		}];
		var seriesdata = [
		    //人口
		    {
		        name: '人口',
		        type: 'map',
		        map: '茂名',
		        itemStyle: {
		            normal: {
		                label: {
		                    show: true
		                },

		                emphasis: {
		                    label: {
		                        show: true
		                    }
		                }
		            }
		        },
		        data: ppdata
		    },
		    //右边图表人口
		    {
		        name: '人口',
		        type: 'bar',
		        xAxisIndex: 0,
		        yAxisIndex: 0,
		        barWidth: '45%',
		        itemStyle: {
		            normal: {
		                color: '#F4A460'
		            }
		        },
		        label: {
		            normal: {
		                show: true,
		                position: "right",
		                textStyle: {
		                    color: "#9EA7C4"
		                }
		            }
		        },
		        data: ppdata
		    }
		];
		var yname = [];
		for (var i = 0; i < 5; i++) {
		    yname.push(seriesdata[1].data[i].name);
		}
			
		//人口
		var option = {
		    title: {
		        text: '广东省茂名市各县(区)人口(2017)',
		        subtext: '数据来源网络（单位：万）',
		        left: 'center',
		        textStyle: {
		            color: '#000'
		        }
		    },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c}万"
		    },
		    /* legend: {
		        orient: 'vertical',
		        bottom: '7%',
		        right: '15%',
		        data: ['人口'],
		        selectedMode: 'single',
		        selected: {
		            '人口': true,
		        }

		    }, */
		    visualMap: {
		        min: 80,
		        max: 200,
		        text: ['高', '低'],
		        realtime: false,
		        calculable: true,
		        left: '10%',
		        inRange: {
		            color: ['LightSkyBlue', 'Yellow', 'orangered']
		            //color: ['#FFFFFF', '#050505']
		        },
		        dimension: 0
		    },

		    grid: {
		        x: '80%',
		        y: '27%',
		        width: '15%',
		        height: '50%'
		    },

		    xAxis: {
		        gridIndex: 0,
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            show: false
		        },
		        splitLine: {
		            show: false
		        },
		        axisLine: {
		            show: false
		        }
		    },
		    yAxis: {
		        gridIndex: 0,
		        interval: 0,
		        data: yname,
		        axisTick: {
		            show: true
		        },
		        axisLabel: {
		            show: true
		        },
		        splitLine: {
		            show: false
		        }
		    },

		    /* toolbox: {
		        feature: {
		            dataView: {
		                readOnly: false
		            },
		            restore: {},
		            saveAsImage: {}
		        }
		    }, */
		    series: seriesdata
		};	
		
			mapChart.setOption(option);

		});
});



</script>



</html>